<template>
    <div class="containss">
        <!-- 头部部分 -->
        <van-nav-bar class="titles">
        <i slot="left" class="iconfont iconzuojiantou" @click="$router.go(-1)"></i>
        <p slot="title" class="title">发现</p>
        <i slot="right" class="iconfont iconShapes"></i>
        </van-nav-bar>
        <!-- 内容区域 -->
        <div class="main">
            <van-nav-bar class="user">
                <van-image                             
                    :src="require('@/assets/1.png')"                                              
                    fit="cover" 
                    class="image"  
                    slot="left"                                                                        
                />
                <div slot="title" class="title">
                    <h3>Eartha</h3>
                    <p>时尚博主</p>
                </div>
                <van-button type="primary" slot="right" class="btns">已关注</van-button>
            </van-nav-bar>
             <van-nav-bar class="user">
                <van-image                             
                    :src="require('@/assets/3.png')"                                              
                    fit="cover" 
                    class="image"  
                    slot="left"                                                                        
                />
                <div slot="title" class="title">
                    <h3>Abagael</h3>
                    <p>摄影师</p>
                </div>
                <van-button type="primary" slot="right" class="btns-two">+关注</van-button>
            </van-nav-bar>
             <van-nav-bar class="user">
                <van-image                             
                    :src="require('@/assets/4.png')"                                              
                    fit="cover" 
                    class="image"  
                    slot="left"                                                                        
                />
                <div slot="title" class="title">
                    <h3>Kaitlyn</h3>
                    <p>模特</p>
                </div>
                <van-button type="primary" slot="right" class="btns">已关注</van-button>
            </van-nav-bar>
             <van-nav-bar class="user">
                <van-image                             
                    :src="require('@/assets/7.png')"                                              
                    fit="cover" 
                    class="image"  
                    slot="left"                                                                        
                />
                <div slot="title" class="title">
                    <h3>Madeline</h3>
                    <p>画家</p>
                </div>
                <van-button type="primary" slot="right" class="btns-two">+关注</van-button>
            </van-nav-bar>
           <van-nav-bar class="user">
                <van-image                             
                    :src="require('@/assets/1.png')"                                              
                    fit="cover" 
                    class="image"  
                    slot="left"                                                                        
                />
                <div slot="title" class="title">
                    <h3>Eartha</h3>
                    <p>时尚博主</p>
                </div>
                <van-button type="primary" slot="right" class="btns">已关注</van-button>
            </van-nav-bar>
             <van-nav-bar class="user">
                <van-image                             
                    :src="require('@/assets/3.png')"                                              
                    fit="cover" 
                    class="image"  
                    slot="left"                                                                        
                />
                <div slot="title" class="title">
                    <h3>Abagael</h3>
                    <p>摄影师</p>
                </div>
                 <van-button type="primary" slot="right" class="btns">已关注</van-button>
            </van-nav-bar>
             <van-nav-bar class="user">
                <van-image                             
                    :src="require('@/assets/4.png')"                                              
                    fit="cover" 
                    class="image"  
                    slot="left"                                                                        
                />
                <div slot="title" class="title">
                    <h3>Kaitlyn</h3>
                    <p>模特</p>
                </div>
                <van-button type="primary" slot="right" class="btns">已关注</van-button>
            </van-nav-bar>
             <van-nav-bar class="user">
                <van-image                             
                    :src="require('@/assets/7.png')"                                              
                    fit="cover" 
                    class="image"  
                    slot="left"                                                                        
                />
                <div slot="title" class="title">
                    <h3>Madeline</h3>
                    <p>画家</p>
                </div>
                 <van-button type="primary" slot="right" class="btns">已关注</van-button>
            </van-nav-bar>
            <van-nav-bar class="user">
                <van-image                             
                    :src="require('@/assets/1.png')"                                              
                    fit="cover" 
                    class="image"  
                    slot="left"                                                                        
                />
                <div slot="title" class="title">
                    <h3>Eartha</h3>
                    <p>时尚博主</p>
                </div>
                <van-button type="primary" slot="right" class="btns">已关注</van-button>
            </van-nav-bar>
             <van-nav-bar class="user">
                <van-image                             
                    :src="require('@/assets/3.png')"                                              
                    fit="cover" 
                    class="image"  
                    slot="left"                                                                        
                />
                <div slot="title" class="title">
                    <h3>Abagael</h3>
                    <p>摄影师</p>
                </div>
                 <van-button type="primary" slot="right" class="btns">已关注</van-button>
            </van-nav-bar>
             <van-nav-bar class="user">
                <van-image                             
                    :src="require('@/assets/4.png')"                                              
                    fit="cover" 
                    class="image"  
                    slot="left"                                                                        
                />
                <div slot="title" class="title">
                    <h3>Kaitlyn</h3>
                    <p>模特</p>
                </div>
                <van-button type="primary" slot="right" class="btns">已关注</van-button>
            </van-nav-bar>
             <van-nav-bar class="user">
                <van-image                             
                    :src="require('@/assets/7.png')"                                              
                    fit="cover" 
                    class="image"  
                    slot="left"                                                                        
                />
                <div slot="title" class="title">
                    <h3>Madeline</h3>
                    <p>画家</p>
                </div>
                <van-button type="primary" slot="right" class="btns">已关注</van-button>
            </van-nav-bar>
        </div>
    </div>
</template>
<style lang="less">
.containss{
    // 头部下划线
    .van-hairline--bottom::after{
        border: none;
    }
    .titles{       
        .title{
            font-size: 32px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #484747;
        }
        .iconzuojiantou{
            padding-left: 18px;
        }
        .iconShapes{
            padding-right: 25px;
        }
        i{
            font-size: 40px;
            color: #535353;
        }
    }
    .main{
        padding: 0px 57px;
        .van-nav-bar__left{
            padding: 0px;
        }
        .van-nav-bar__left, .van-nav-bar__right{
            padding: 0px;
        }
        .user{
            padding: 33px 0px;
            .image{
                img{
                    width: 86px;
                    height: 86px;
                    border-radius: 50%;
                }
            }
            .title{
                text-align: left;
                h3{
                    font-size: 28px;
                    line-height: 28px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color: #4a4a4a;
                    margin-bottom: 18px;
                }
                p{
                    font-size: 22px;
                    line-height: 22px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color: #9b9b9b;
                }
            }
            .van-nav-bar__title{
                    margin: 0px 0px 0px 110px;
            }
            .btns{
                .van-button--primary{
                    background: #ffffff;
                }
                
                width: 168px;
                height: 50px;
                background: #ffffff;
                border: solid 2px #979797;
                border-radius: 30px;
                font-size: 22px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #9b9b9b;
                
            }
            .btns-two{
                width: 168px;
                height: 50px;
                background-color: #4a4a4a;
                border-radius: 30px;
                border: solid 2px #e9e9e9;
                font-size: 22px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #ffffff;
            }
        }
    }
}
</style>
